<template>
	<view class="home">
		<view class="home_wrap">
			<view class="home_title">
				<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="text" active-color="red">
			
				</uni-segmented-control>
			
			</view>
			<view class="home_search">
				<image src="../../static/image/SOU SUO.png"></image>
			</view>
		</view>

		<view class="home_content">
			<view v-if="current === 0">
				<home-recommend></home-recommend>
			</view>
			<view v-if="current === 1">
				<home-category></home-category>
			</view>
			<view v-if="current === 2">
				<home-new></home-new>
			</view>
			<view v-if="current === 3">
				<home-album></home-album>
			</view>
		</view>




	</view>
</template>

<script>
	import {
		uniBadge,
		uniSegmentedControl
	} from '@dcloudio/uni-ui'
	import
	homeAlbum
	from './home-album/index'
	import
	homeCategory
	from './home-category/index'
	import
	homeNew
	from './home-new/index'
	import
	homeRecommend
	from './home-recommend/index'
	import request from '../../JS/request.js'
	export default {

		data() {
			return {
				items: ['推荐', '分类', '最新', '专辑'],
				current: 0
			}
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
				}
			}
		},
		components: {
			uniSegmentedControl,
			uniBadge,
			homeAlbum,
			homeCategory,
			homeNew,
			homeRecommend
		},
		onLoad: () => {
			wx.setNavigationBarTitle({
				title: "推荐"
			})
			
		}
	}
</script>

<style lang="scss">
.home_wrap{
	position: relative;
	.home_title{
		width: 70vw;
		margin: 0 auto;
	}
	.home_search{
		position: absolute;
		right: 5%;
		top: 50%;
		transform: translateY(-50%);
		image{
			height: 40rpx;
			width: 40rpx;
		}
	}
}

</style>
